<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- <my-com-a :Fmsg="Fmsg" :is-active="true" :obj="{name:'zhangsan',age:15}" title="标题" :stu="[1,2,3,4,5]"></my-com-a> -->
        <!-- null undefined 可以通过任何类型验证 -->
        <!-- <my-com-a :Fmsg="Fmsg" :is-active="undefined" :obj="{name:'zhangsan',age:15}" title="标题" :stu="[1,2,3,4,5]"></my-com-a> -->
        <my-com-a name="张三" :age="80" :Fmsg="Fmsg" :is-active="56" :obj="{name:'zhangsan',age:15}" title="标题">
        </my-com-a>
    </div>
    <script>
        let mycomA = {
            // props: ['Fmsg', 'title'],
            props: {
                Fmsg: Number,
                title: String,
                // stu:Array,
                obj: Object,
                // 多个可能的数据类型
                isActive: [Boolean, Number],
                // 必传的字段--表单验证
                name: { type: String, required: true },
                // 带有默认值
                // 自定义校验器 自定义规则
                age: {
                    type: Number,
                    validator(value) {
                        return value > 50
                    }
                },
                // age:{type:Number,default:100},
                // 希望引用数据类型带有默认值
                // stu:{type:Array,default:[6,7,8,9,10]}--错误
                stu: {
                    type: Array,
                    // 使用引用数据类型使用工厂函数
                    default() {
                        return [11, 12]
                    }
                }

            },
            template: `
            <div>子组件A
                <span>{{stu}}-{{Fmsg}}-{{title}}-{{obj}}-{{isActive}}-{{name}}-{{age}}</span>
            </div>
          `
        }
        let vm = new Vue({
            components: {
                'my-com-a': mycomA
            },
            el: "#app",
            data: {
                Fmsg: 12
            },
            methods: {

            }
        })
    </script>
</body>

</html>